<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const $router = useRouter()
const show = ref(false)
if (localStorage.getItem("token") == null) {
    show.value = true
}
$router.beforeEach((to) => {
    if (localStorage.getItem("token")) {
        show.value = false
    } else {
        if (to.path == '/BookShelf') {
            show.value = true
        } else if (to.path == '/home') {
            show.value = true
        } else if (to.path == '/about') {
            show.value = true
        } else {
            show.value = false
        }
    }
});
</script>
<template>
    <div class="tips" v-if="show">
        <button @click="$router.push('/login?to=/changeMsg')">立即登录</button>
    </div>
</template>

<style scoped lang='less'>
.tips {
    position: fixed;
    bottom: 54px;
    left: 0;
    right: 0;
    width: 90%;
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    margin: auto;
    z-index: 9999;
    padding: 8px 12px;
    border-radius: 18px;
    button{
        font-size: .8rem;
    }
}
</style>